<script setup lang="ts">
import type { PropType } from 'vue'

const props = defineProps({
	/** 页码，支持v-model */
	index: {
		type: Number,
		required: true,
	},
	/** 每页条数，支持v-model */
	limit: {
		type: Number,
		required: true,
	},
	/** 状态 */
	state: {
		type: Object as PropType<{
			total: number
		}>,
		required: true,
	},
	pageSize: {
		type: Array as PropType<number[]>,
		default: () => [10, 20, 30, 50],
	},
	small: {
		type: Boolean,
		default: false,
	},
	layout: {
		type: String,
		default: 'total,sizes,prev,pager,next,jumper',
	},
})

const emit = defineEmits(['update:index', 'update:limit', 'current-change', 'size-change'])
</script>

<template>
	<el-pagination
		class="x-pagination mt-4 flex flex-wrap justify-end"
		v-bind="$attrs"
		:total="state.total"
		:current-page="index"
		:page-size="limit"
		:small="small"
		:layout="layout"
		:page-sizes="pageSize"
		@update:current-page="emit('update:index', $event)"
		@update:page-size="emit('update:limit', $event)"
		@current-change="emit('current-change', $event)"
		@size-change="emit('size-change', $event)"
	/>
</template>
